<template>
  <div>
    <v-slide-group>
      <v-slide-item v-for="(scholar, index) in scholars" :key="index">
        <div class="follow">
          <div class="single-follow" @click="toAuthor(scholar.follower)">
            <v-avatar
                rounded
                size="85"
                outlined
                class="img"
            >
            <v-img :src="scholar.author.avatar"></v-img>
            </v-avatar>
            <div>
            <span class="follow-name">{{ scholar.author.name.substring(0, 8) }}</span>
            <span v-if="scholar.author.name.length > 8"> ...</span>
            </div>
          </div>
        </div>
      </v-slide-item>
    </v-slide-group>
    <v-divider></v-divider>
    <div>
      
    </div>
  </div>
</template>

<script>

export default {
  props: ["scholars"],
  components: {
  },
  methods: {
    toAuthor(scholar) {
      console.log(scholar);
      this.$router.push("/profile/"+scholar)
    },
  },
  data() {
    return {};
  }
};
</script>

<style lang="sass" scoped>
.v-card
  width: 100%
</style>
<style scoped>
.img {
  border-radius: 50%!important; 
  background-color: black 
}
.follow {
  display: inline-flex;
}
.single-follow {
  cursor: pointer;
  margin: 30px;
  text-align: center;
}
</style>
